<template>
	<view class="wrap">
		<!-- 状态栏占位 -->
		<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>

		<!-- 功能图标区域 -->
		<view class="function-icons">
			<view class="icon-item" @click="onFunctionClick('method')">
				<view class="icon-circle" style="background: #6366f1;">
					<text class="icon-text">📚</text>
				</view>
				<text class="icon-label">启蒙方法</text>
			</view>
			<view class="icon-item" @click="onFunctionClick('voice')">
				<view class="icon-circle" style="background: #ec4899;">
					<text class="icon-text">🎤</text>
				</view>
				<text class="icon-label">我的配音</text>
			</view>
			<view class="icon-item" @click="onFunctionClick('ear')">
				<view class="icon-circle" style="background: #06b6d4;">
					<text class="icon-text">👂</text>
				</view>
				<text class="icon-label">磨耳朵</text>
			</view>
		</view>

		<!-- 阅读统计 -->
		<view class="reading-stats">
			<view class="stats-title">总阅读{{readingDays}} 天 - {{totalNumberOfReadings}} 本</view>
			<view class="stats-row">
				<view class="stat-item">
					<text class="stat-label">今日阅读</text>
					<text class="stat-number">{{ todayReadingTotal }}</text>
					<text class="stat-unit">本</text>
				</view>
				<view class="stat-item">
					<text class="stat-label">本周阅读</text>
					<text class="stat-number">{{ thisWeekReadingTotal }}</text>
					<text class="stat-unit">本</text>
				</view>
				<view class="stat-item">
					<text class="stat-label">本月阅读</text>
					<text class="stat-number">{{ thisMonthReadingTotal }}</text>
					<text class="stat-unit">本</text>
				</view>
			</view>
		</view>

		<!-- 打卡按钮 -->
		<view class="checkin-button" @click="onCheckin">
			<text class="checkin-text">今日读了{{ todayReadingTotal }}本，打个卡</text>
		</view>

		<!-- 打卡日历 -->
		<view class="calendar-section" @click="goToCalendar">
			<view class="calendar-header">
				<text class="calendar-title">打卡日历</text>
				<text class="calendar-more">{{ checkInDays }}天 ></text>
			</view>
			<!-- <view class="calendar-weekdays">
				<text class="weekday">一</text>
				<text class="weekday">二</text>
				<text class="weekday">三</text>
				<text class="weekday">四</text>
				<text class="weekday">五</text>
				<text class="weekday active">六</text>
				<text class="weekday">七</text>
			</view>-->
		</view>

		<!-- 底部用户信息 -->
		<view class="user-info-section">
			<view class="tab-bar">
				<text class="tab" :class="{ active: currentTab === 'latest' }" @click="switchTab('latest')">最新</text>
				<text class="tab" :class="{ active: currentTab === 'follow' }" @click="switchTab('follow')">关注</text>
				<text class="tab" :class="{ active: currentTab === 'mine' }" @click="switchTab('mine')">我的</text>
			</view>
			<view class="user-item" v-for="(item,index) in records" :key="index" @click="details(item)">
				<image class="user-avatar" :src="item.avatar || '/static/default-avatar.png'"></image>
				<view class="user-content">
					<view class="user-one">
						<text class="user-name">{{item.nickName}}</text>
						<text class="user-time">{{formatTime(item.time)}}</text>
					</view>
					<text class="user-action">打卡第{{item.checkInTotalCount}}天，读了{{item.bookRecordCount}}本</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as Category from '@/api/category.js'

	export default {
		data() {
			return {
				checkInDays: undefined,
				readingDays: undefined,
				thisMonthReadingTotal: undefined,
				thisWeekReadingTotal: undefined,
				todayReadingTotal: undefined,
				totalNumberOfReadings: undefined,
				currentTab: 'latest',
				isCheckInValidation: false,
				records: []
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad() {
			// 获取状态栏高度
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight || 0;

		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {
			if (this.checkLoginStatus()) {
				// 获取阅读数据
				this.getReadingData();
				this.checkInValidation();
				this.allUsersRecentCheckInRecords(this.currentTab);
			}

		},

		methods: {
			// 检查登录状态
			checkLoginStatus() {
				const token = this.$store.getters.token;
				if (!token) {
					// 没有token，跳转到登录页面
					uni.showModal({
						title: '提示',
						content: '请先登录后再使用此功能',
						confirmText: '去登录',
						cancelText: '取消',
						success: (res) => {
							if (res.confirm) {
								uni.reLaunch({
									url: '/pages/login/index'
								});
							}
						}
					});
					return false;
				}
				return true;
			},
			async details(item) {
				try {
					uni.navigateTo({
						url: `/pages/category/detail/detail?id=${item.id}
						&&avatar=${item.avatar}&&nickName=${item.nickName}
						&&time=${item.time}&&checkInTotalCount=${item.checkInTotalCount}
						&&bookRecordCount=${item.bookRecordCount}`
					});
				} catch (error) {
					console.error('进入计划详情失败:', error);
				}
			},


			formatTime(recordTime) {
				if (!recordTime) return '';
				const recordTimestamp = new Date(recordTime).getTime();
				const nowTimestamp = new Date().getTime();
				const diff = nowTimestamp - recordTimestamp;
				const fiveMinutes = 5 * 60 * 1000;

				if (diff < fiveMinutes) {
					return '刚刚';
				}

				const recordDate = new Date(recordTime).toDateString();
				const today = new Date().toDateString();
				const yesterday = new Date(nowTimestamp - 24 * 60 * 60 * 1000).toDateString();

				if (recordDate === today) {
					return '今天';
				} else if (recordDate === yesterday) {
					return '昨天';
				} else {
					return '2天前';
				}
			},
			/**
			 * 获取阅读数据
			 */
			async getReadingData() {

				const resp = await Category.getBookCheckInRecordById();
				if (resp.code === 0 && resp.data) {
					this.readingDays = resp.data.readingDays;
					this.thisMonthReadingTotal = resp.data.thisMonthReadingTotal;
					this.thisWeekReadingTotal = resp.data.thisWeekReadingTotal;
					this.todayReadingTotal = resp.data.todayReadingTotal;
					this.totalNumberOfReadings = resp.data.totalNumberOfReadings;
					this.checkInDays = resp.data.checkInDays;
				}
			},

			async checkInValidation() {
				const resp = await Category.checkInValidation();
				this.isCheckInValidation = resp.data;
			},

			async allUsersRecentCheckInRecords(tab) {
				const resp = await Category.allUsersRecentCheckInRecords(tab);
				this.records = resp.data
				console.log(this.records)
			},


			/**
			 * 功能图标点击事件
			 */
			onFunctionClick(type) {
				switch (type) {
					case 'method':
						this.$toast('启蒙方法功能');
						break;
					case 'voice':
						uni.navigateTo({
							url: '/pages/category/voice'
						});
						break;
					case 'ear':
						uni.navigateTo({
							url: '/pages/category/ear'
						});
						break;
				}
			},

			/**
			 * 打卡按钮点击事件
			 */
			onCheckin() {

				if (!this.isCheckInValidation) {
					uni.showToast({
						title: '当天需阅读至少1本绘本才能进入打卡页面',
						icon: 'none'
					});
					return;
				}
				uni.navigateTo({
					url: `/pages/category/checkin?booksCount=${this.todayReadingTotal}`
				});
			},

			/**
			 * 切换底部Tab
			 */
			switchTab(tab) {
				this.currentTab = tab;
				this.allUsersRecentCheckInRecords(this.currentTab);
			},

			/**
			 * 跳转到打卡日历页面
			 */
			goToCalendar() {
				uni.navigateTo({
					url: '/pages/category/calendar?checkInDays'
				});
			},
		},

	}
</script>

<style>
	page {
		background: #f8f9fa;
	}
</style>
<style lang="scss" scoped>
	.wrap {
		background-color: #f8f9fa;
		min-height: 100vh;
	}

	.status-bar {
		width: 100%;
		background-color: #fff;
	}

	// 顶部标题
	.header {
		background: #fff;
		padding: 30rpx 0;
		text-align: center;

		.title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
		}
	}

	// 功能图标区域
	.function-icons {
		background: #fff;
		padding: 40rpx 60rpx;
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;

		.icon-item {
			display: flex;
			flex-direction: column;
			align-items: center;

			.icon-circle {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 20rpx;

				.icon-text {
					font-size: 48rpx;
				}
			}

			.icon-label {
				font-size: 28rpx;
				color: #666;
			}
		}
	}

	// 阅读统计
	.reading-stats {
		background: #fff;
		margin-bottom: 20rpx;
		padding: 40rpx;

		.stats-title {
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 40rpx;
		}

		.stats-row {
			display: flex;
			justify-content: space-between;

			.stat-item {
				display: flex;
				flex-direction: column;
				align-items: center;

				.stat-label {
					font-size: 28rpx;
					color: #666;
					margin-bottom: 10rpx;
				}

				.stat-number {
					font-size: 48rpx;
					font-weight: bold;
					color: #333;
				}

				.stat-unit {
					font-size: 24rpx;
					color: #666;
				}
			}
		}
	}

	// 打卡按钮
	.checkin-button {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		margin: 0 40rpx 20rpx;
		padding: 30rpx;
		border-radius: 50rpx;
		text-align: center;

		.checkin-text {
			color: #fff;
			font-size: 32rpx;
			font-weight: bold;
		}
	}

	// 打卡日历
	.calendar-section {
		background: #fff;
		margin-bottom: 20rpx;
		padding: 40rpx;

		.calendar-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30rpx;

			.calendar-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}

			.calendar-more {
				font-size: 28rpx;
				color: #666;
			}
		}

		.calendar-weekdays {
			display: flex;
			justify-content: space-between;

			.weekday {
				width: 80rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 28rpx;
				color: #666;
				border-radius: 50%;

				&.active {
					background: #667eea;
					color: #fff;
				}
			}
		}
	}

	// 底部用户信息
	.user-info-section {
		background: #fff;

		.tab-bar {
			display: flex;
			border-bottom: 1px solid #eee;

			.tab {
				flex: 1;
				text-align: center;
				padding: 30rpx 0;
				font-size: 28rpx;
				color: #666;
				position: relative;

				&.active {
					color: #667eea;

					&::after {
						content: '';
						position: absolute;
						bottom: 0;
						left: 50%;
						transform: translateX(-50%);
						width: 60rpx;
						height: 4rpx;
						background: #667eea;
						border-radius: 2rpx;
					}
				}
			}
		}

		.user-item {
			display: flex;
			align-items: center;
			padding: 30rpx 40rpx;

			.user-avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				background: #f0f0f0;
				margin-right: 20rpx;
			}

			.user-content {
				flex: 1;

				.user-one {
					display: flex;
					align-items: center;

					.user-name {
						display: flex;
						font-size: 32rpx;
						font-weight: bold;
						color: #333;
						margin-bottom: 10rpx;
					}

					.user-time {
						display: flex;
						font-size: 32rpx;
						color: #333;
						margin-left: 300rpx;
					}
				}



				.user-action {
					display: block;
					font-size: 24rpx;
					color: #666;
				}
			}
		}
	}
</style>